import React, { Component } from 'react'
import { NavBar, TabBar } from 'antd-mobile'
import {
  Route,
  Switch,
  useHistory,
  useLocation,
  MemoryRouter as Router,
} from 'react-router-dom'
import {
  AppOutline,
  MessageOutline,
  UnorderedListOutline,
  UserOutline,
} from 'antd-mobile-icons'
import styles from './index.module.scss'
import FindHome from '../FindHome'
import News from '../News'
import User from '../User'
import Index from '../Index'
const Bottom = () => {
  const history = useHistory()
  const location = useLocation()
  const { pathname } = location

  const setRouteActive = (value) => {
    history.push(value)
  }

  // 底部菜单 信息
  const tabs = [
    {
      key: '/index',
      title: '首页',
      icon: <i className="iconfont icon-ind"></i>,
    },
    {
      key: '/findhome',
      title: '找房',
      icon: <i className="iconfont icon-findHouse"></i>,
    },
    {
      key: '/new',
      title: '资讯',
      icon: <i className="iconfont icon-infom"></i>,
    },
    {
      key: '/my',
      title: '我的',
      icon: <i className="iconfont icon-my"></i>,
    },
  ]

  return (
    <TabBar activeKey={pathname} onChange={(value) => setRouteActive(value)}>
      {tabs.map((item) => (
        <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
      ))}
    </TabBar>
  )
}

export default class Home extends React.Component {
  render() {
    return (
      <div className={styles.app}>
        {/* <div className={styles.top}>
          <NavBar>配合路由使用</NavBar>
        </div> */}
        <div className={styles.body}>
          <Switch>
            <Route path="/index" component={Index}></Route>
            <Route path="/findhome" component={FindHome}></Route>
            <Route path="/new" component={News}></Route>
            <Route path="/my" component={User}></Route>
          </Switch>
        </div>
        <div className={styles.bottom}>
          <Bottom />
        </div>
      </div>
    )
  }
}

// function Home() {
//   return <div>首页</div>
// }

// function Todo() {
//   return <div>我的代办</div>
// }

// function Message() {
//   return <div>我的消息</div>
// }

// function PersonalCenter() {
//   return <div>个人中心</div>
// }
